<template>
  <view class="classList">
	  <view class="loadingLayout" v-if="!classList.length && !noData">
		  <uni-load-more status="loading"></uni-load-more>
	  </view>
    <div class="content">
      <navigator class="item" :url="'/pages/preView/preView?id='+item._id" v-for="item in classList">
        <image :src="item.smallPicurl" mode="aspectFill"></image>
      </navigator>
    </div>
	<view class="loadingLayout" v-if="classList.length || noData">
			  <uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
	</view>
	
	<view class="safe-area-inset-bottom">
	</view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import {onLoad , onReachBottom} from "@dcloudio/uni-app"
import {apiGetClassList} from "../../api/apis.js"
const classList = ref([])
const noData=ref(false)
const queryParam={
	pageNum:1,
	pageSize:12
}

// 导航数据在onload获取，get要晚于导航数据获取
onLoad((e)=>{
	let {id=null,name=null}=e;
	queryParam.classid=id;
	uni.setNavigationBarTitle({
		title:name
	})
	getClassList()
})

/* 触底 */
onReachBottom(()=>{
	if(noData.value) return;
	queryParam.pageNum++;
	getClassList()
})
const getClassList = async ()=>{
let res=await apiGetClassList(queryParam);
// 新旧数据拼接
classList.value=[...classList.value,...res.data]
// 数据判断
if(queryParam.pageSize>res.data.length) noData.value=true
console.log(classList.value)
uni.setStorageSync('storageClass',classList.value)
}


</script>

<style lang="scss" scoped>
.classList{
  .content{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5rpx;
    padding: 5rpx;
    .item{
      height: 440rpx;
      image{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>
